<template>
  <v-container style="height: 100vh">
    <VideoListVue :video-list="videoList" :showHot="currentClassify == 0" />
    <v-dialog
      :model-value="dialog"
      fullscreen
      transition="dialog-bottom-transition"
    >
      <v-card v-if="dialog">
        <Video :video-info="searchVideoInfo" :close-video="closeVideo" />
      </v-card>
    </v-dialog>
  </v-container>
</template>
<script setup>
import { computed, onMounted, onUnmounted, onUpdated, ref, watch } from "vue";
import { useRoute } from "vue-router";
import {
  apiGetVideoById,
  apiSearchVideo,
  apiVideoByClassfiy,
} from "../../apis/video";
import Video from "../../components/video/index.vue";
import VideoListVue from "../../components/video/list.vue";
import router from "../../router/index.js";
// 数据是否正在加载标志
const isLoading = ref(true);
// 视频列表数据
const videoList = ref([]);
// 当前选中的分类
const currentClassify = ref(0);
// 获取当前路由信息
const route = useRoute();
// 搜索到的视频信息
const searchVideoInfo = ref(null);
// 分页信息
const pageInfo = ref({
  // 当前页码
  page: 1,
  // 每页显示数量
  limit: 15,
});
// 计算属性，用于判断是否显示对话框
const dialog = computed(() => (searchVideoInfo.value ? true : false));
// 获取分类视频
const getCurrentClassifyVideo = () => {
  // 判断当前是否处于搜索状态，是则直接返回
  if (route.meta.isSearch) return;
  // 设置数据加载标志为true，表示开始加载数据
  isLoading.value = true;
  // 发送根据分类查询视频请求
  apiVideoByClassfiy(
    currentClassify.value,
    pageInfo.value.page,
    pageInfo.value.limit
  ).then(({ data }) => {
    videoList.value = videoList.value.concat(data.data);
    isLoading.value = false;
  });
};
// 关闭视频搜索结果
function closeVideo() {
  // 调用返回上一页方法
  router.back();
  // 设置搜索到的视频信息为空
  searchVideoInfo.value = null;
}
// 搜索视频函数
const getSearchVideo = () => {
  // 发送搜查请求
  apiSearchVideo(
    route.params.key,
    pageInfo.value.page,
    pageInfo.value.limit
  ).then(({ data }) => {
    isLoading.value = false;
    if (!data.state) {
      return;
    }
    // 将返回的视频数据追加到videoList中
    videoList.value = videoList.value.concat(data.data.records);
  });
};
// 监听当前分类数据的变化
watch(currentClassify, () => {
  // 清空视频列表
  videoList.value = [];
  // 将当前页面重置为1
  pageInfo.value.page = 1;
  // 重新获取当前分类的视频
  getCurrentClassifyVideo();
});
// 初始化视频数据
const initView = () => {
  // 分类浏览状态
  if (route.meta.isClassify) {
    // 重置分页页码
    pageInfo.value.page = 1;
    // 重置视频列表
    videoList.value = [];
    // 设置当前的分类
    currentClassify.value = route.params.classify;
  } else if (route.meta.isSearch) {
    // 搜索状态
    // 重置视频列表
    videoList.value = [];
    // 搜索视频
    getSearchVideo();
    // 设置当前分类为-1
    currentClassify.value = -1;
    return;
  } else {
    // 重置分页页码
    pageInfo.value.page = 1;
    // 重置视频列表
    videoList.value = [];
    // 重置当前分类
    currentClassify.value = 0;
    // 获取当前分类的视频
    getCurrentClassifyVideo();
  }
  // 判断是否为播放特定视频(点击视频时触发)
  if (route.query.play) {
    // 发送查询视频的请求
    apiGetVideoById(route.query.play).then(({ data }) => {
      if (!data.state) {
        return;
      }
      // 设置搜索视频信息
      searchVideoInfo.value = data.data;
    });
  }
};

// 监听滚动事件
const listenScroll = () => {
  //变量scrollTop是滚动条滚动时，距离顶部的距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //变量windowHeight是可视区的高度
  var windowHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  //变量scrollHeight是滚动条的总高度
  var scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;
  //滚动条到底部的条件
  let sum = scrollHeight - ((scrollTop + windowHeight));
  if (sum < 150 && sum > -1 && !isLoading.value) {
    isLoading.value = true;
    // 自增页码
    pageInfo.value.page++;
    // 根据当前状态查询对应的数据
    if (route.meta.isSearch) getSearchVideo();
    else {
      getCurrentClassifyVideo();
    }
  }
};

onUpdated(() => {
  initView();
});
onMounted(() => {
  // 初始化视图
  initView();
  // 添加窗口滚动事件监听器
  window.addEventListener("scroll", listenScroll);
});
onUnmounted(() => {
  // 卸载窗口滚动事件监听器
  window.removeEventListener("scroll", listenScroll);
});
</script>
<style scoped>
.scroll {
  overflow: scroll;
  display: none;
}
</style>